<template>
  <div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#304156"
      class="el-menu-vertical-demo"
      text-color="#fff"
      :collapse="props.item"
      unique-opened
      default-active=""
      router
    >
      <el-sub-menu
        :index="'/' + item.path"
        v-for="(item, i) in list.object"
        :key="item.id"
      >
        <template #title>
          <el-icon>
            <component :is="icon[i]"></component>
          </el-icon>

          <span class="ziti">{{ item.authName }}</span>
        </template>
        <el-menu-item-group
          v-for="(shuju, index) in item.children"
          :key="shuju.id"
        >
          <template #title>
            <el-menu-item :index="shuju.path" style="padding-left: 0px">
              <el-icon>
                <component :is="icons"></component>
              </el-icon>
              <span>{{ shuju.authName }}</span>
            </el-menu-item>
          </template>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from 'vue';
import { apis } from '@/http/api';
//定义图标
const icon = ref(['user', 'setting', 'shop', 'tickets', 'pie-chart']);
const icons = ref('menu');

//获取数据
const props = defineProps({
  item: null,
});
//获取首页左侧数据列表
const list = reactive({
  object: null as any,
});
//获取数据
const shuju = reactive({
  object: null as any,
});
//初始化数据
onMounted(() => {
  huoqu();
});
//请求数据
const pagenum = ref(1);
const pagesize = ref(2);
const huoqu = () => {
  const a = apis.getshouye().then(({ data: res }) => {
    // console.log(res);

    list.object = res;
  });
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border: none;
}
</style>
